<template>
  <view>
    <!-- <text>设置页面</text>
    <button @click="openAppAuthorizeSetting">openAppAuthorizeSetting</button>
    <LoadingPage /> -->
    <up-tabs :list="tabs" @click="tabClickHandler" lineColor="#d54448"></up-tabs>
    <up-list
      @scrolltolower="scrolltolower"
      height="calc(100vh - 38px)"
    >
      <up-list-item
        v-for="(item, index) in configList"
        :key="index"
      >
        <up-cell :title="`列表长度-${index + 1}`">
          <template #icon>
            <up-avatar
              shape="square"
              :size="35"
              :src="item.url"
              customStyle="margin: -3px 5px -3px 0"
            ></up-avatar>
          </template>
        </up-cell>
      </up-list-item>
    </up-list>
  </view>
</template>

<script setup lang="ts">
import { DeviceTypeNameEnum, settingTypeNameEnum } from '@/types/enum';
import { tabsType } from '@/types/type';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';

type configListType = {
  url: string;
}

const tabs = reactive<tabsType[]>(Object.keys(settingTypeNameEnum).map((key, index) => {
  return { name: settingTypeNameEnum[key as keyof typeof settingTypeNameEnum], index: index };
}));
const currentTab = ref<number>(0);
const tabClickHandler = (tab: tabsType) => {
  currentTab.value = tab.index as number;
  console.log(currentTab.value);
}

const urls = [
  'https://uview-plus.jiangruyi.com/album/1.jpg',
  'https://uview-plus.jiangruyi.com/album/2.jpg',
  'https://uview-plus.jiangruyi.com/album/3.jpg',
  'https://uview-plus.jiangruyi.com/album/4.jpg',
  'https://uview-plus.jiangruyi.com/album/5.jpg',
  'https://uview-plus.jiangruyi.com/album/6.jpg',
  'https://uview-plus.jiangruyi.com/album/7.jpg',
  'https://uview-plus.jiangruyi.com/album/8.jpg',
  'https://uview-plus.jiangruyi.com/album/9.jpg',
  'https://uview-plus.jiangruyi.com/album/10.jpg',
];
const configList = reactive<configListType[]>([

])

const loadmore = () => {
  for (let i = 0; i < 30; i++) {
    configList.push({
      url: urls[uni.$u.random(0, urls.length - 1)],
    });
  }
};

onLoad(() => {
  loadmore();
});

const scrolltolower = () => {
  console.log('scrolltolower: ');
  loadmore();
};

const openAppAuthorizeSetting = () => {
  uni.openAppAuthorizeSetting({
    success(res) {
      console.log(res)
    }
  })
}
</script>

<style></style>
